<%--
  Created by IntelliJ IDEA.
  User: 15415
  Date: 2023/6/29
  Time: 14:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>添加图书</title>
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">

        .col-sm-10>input{
            width: 250px;
        }
        .col-sm-10>select{
            width: 250px;
        }

    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-6"></div>
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-lg-6"></div>
                        <div class="col-lg-6" style="height: 40px;">
                            <div class="dropdown" style="float: right;">
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    H
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="min-width: 50px;">
                                    <li><a href="#">注销</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <h1 class="text-center">添加图书</h1>
    <form action="AddBookServlet" class="form-horizontal" style="width: 350px;margin: 10px auto;margin-top: 40px;" method="post">
        <div class="form-group">
            <label for="bookName" class="col-sm-2 control-label">书名:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="bookName" placeholder="书名" name="bookName" >
            </div>
        </div>
        <div class="form-group">
            <label for="authorName" class="col-sm-2 control-label">作者:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="authorName" placeholder="作者" name="authorName">
            </div>
        </div>
        <div class="form-group">
            <label for="price" class="col-sm-2 control-label" >价格:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="price" placeholder="价格" name="price">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">分类:</label>
            <div class="col-sm-10">
                <select class="form-control" name="categoryId">
                    <c:forEach items="#{categories}" var="category">
                        <option value="${category.categoryId}">${category.categoryName}</option>
                    </c:forEach>
<%--                    <option>历史</option>--%>
<%--                    <option>文学</option>--%>
<%--                    <option>玄幻</option>--%>
<%--                    <option>穿越</option>--%>
<%--                    <option selected>社会</option>--%>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10 text-center">
                <button type="submit" class="btn btn-default">添加图书</button>
            </div>
        </div>
    </form>

</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="dist/js/bootstrap.js"></script>
</body>
</html>
